<template>
    <div style="background-color: rgb(229,231,235)">
        <div class="needs">
            <el-form :model="searchs" >
                <el-row>
                    <el-col :span="5" style="height: 35px;">
                        <div  class="need">
                            <el-form-item prop="state">
                                <el-select  v-model="searchs.state" value-key="oppoStateId" placeholder="选择状态" >
                                    <!--key是循环的标准，lable是渲染出的值，v-model拿到value中的值-->
                                    <el-option  v-for="item in states"  :key="item.oppoStateId"  :label="item.oppoStateName" :value="item"></el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="5" style="height: 35px;">
                        <div  class="">
                            <el-form-item prop="state">
                                <el-select  v-model="searchs.emp" value-key="emp_id" placeholder="选择业务员">
                                    <!--key是循环的标准，lable是渲染出的值，v-model拿到value中的值-->
                                    <el-option  v-for="item in emps"  :key="item.emp_id"  :label="item.emp_name" :value="item"></el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="5" style="height: 35px;">
                        <div  class="">
                            <el-form-item prop="state">
                                <!--key是循环的标准，lable是渲染出的值，v-model拿到value中的值-->
                                <el-date-picker
                                        width="100%"
                                        value-format="yyyy-MM-dd"
                                        v-model="searchs.date"
                                        align="right"
                                        type="date"
                                        placeholder="选择成交日期"
                                        :picker-options="pickerOptions">
                                </el-date-picker>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="5" style="margin-left: 70px">
                        <el-button @click="searchOppoPro">搜索</el-button>
                    </el-col>
                </el-row>
            </el-form>
            <el-collapse accordion>
                <div @click="watchOppo(item.pro_detail_id,)" v-for="item in proOffer" :key="item.pro_detail_id" style="border-bottom: 1px solid rgb(229,231,235)">
                    <el-collapse-item>
                        <template slot="title">
                            <span style="padding-left: 10px;padding-right: 5px">产品名称:</span>
                            {{item.product_brand}}{{item.ability_name}}{{item.product_name}}
                        </template>
                        <el-table
                                :data="watchOppos"
                                @row-click="searchOppoName">
                            <el-table-column label="机会名称" min-width="120" :show-overflow-tooltip="true">
                                <template slot-scope="s">
                                    <span>{{s.row.oppo_name}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="客户">
                                <template slot-scope="s">
                                    <span>{{s.row.customer_name}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="业务员">
                                <template slot-scope="s">
                                    <span>{{s.row.emp_name}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="数量">
                                <template slot-scope="s">
                                    <span>{{s.row.product_num}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="预计成交额" prop="proCount">
                                <template slot-scope="s">
                                    <span>{{s.row.product_num * s.row.offer}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="预计成交时间">
                                <template slot-scope="s">
                                    {{ s.row.plan_ideal_time | format_date}}
                                </template>
                            </el-table-column>
                            <el-table-column label="创建时间">
                                <template slot-scope="s">
                                    {{ s.row.state_date | format_date}}
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-collapse-item>
                </div>
            </el-collapse>
            <div class="block" style="margin-top:10px">
                <el-pagination
                        background
                        :current-page.sync="currpage"
                        :page-size="pagesize"
                        @current-change="changge_page"
                        layout="total, prev, pager, next"
                        :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "pro_offer",
        data:function () {
            return{
                classliy:0,
                emps:[],                    //员工数据源
                states:[],                  //机会状态数据源
                proOffer:[],                //机会产品数据源
                searchs:{
                    state:{oppoStateId:0},
                    emp:{emp_id:0},
                    date:null,
                },
                detailId:0,
                watchOppos:[],
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
                currpage:1,
                total:0,
                pagesize:4,
            }
        },
        methods:{
            get_states(){
                this.states = this.$parent.$parent.oppoStates
            },
            get_emps(){
                this.axios.get("api/oppo-sale/findEasyEmp")
                    .then(v=>{
                        this.emps = v.data;
                    }).catch()
            },
            //搜索
            searchOppoPro(){
                window.console.log(this.searchs.emp.emp_id)
                window.console.log(this.searchs.state.oppoStateId)
                window.console.log(this.searchs.date)
                this.axios.get("api/oppo-sale/findNeedPro",{params:{"empId":this.searchs.emp.emp_id,"oppoStateId":this.searchs.state.oppoStateId,"date":this.searchs.date}})
                    .then(v=>{
                        this.proOffer = v.data;
                        this.currpage = 1
                        this.total = 0
                    }).catch()
            },
            //点击启用的方法，获得pro_detail_id来查opportunity
            watchOppo(proDetailId){
                this.detailId = proDetailId
                this.axios.get("api/oppo-sale/findDetailPro",{params:{"proDetailId":proDetailId,"currPage":this.currpage,"pageSize":this.pagesize,"date":this.searchs.date}})
                    .then(v=>{
                        this.watchOppos = v.data.data;
                        this.total = v.data.total;
                    }).catch()
            },
            /* 分页页码改变事件 */
            changge_page(){
                this.watchOppo(this.detailId)
            },
            searchOppoName(row){
                this.$parent.$parent.seeProOfferDialogVisible = false;
                this.$parent.$parent.search = row.oppo_name;
            },
        },
        created:function() {
            this.get_states();
            this.get_emps();
            // this.get_emps();
             this.searchOppoPro();
            /*初始化后，保存当前页面对象*/
            // this.$store.dispatch("setVueOppotunity",this)
        },

    }
</script>

<style scoped>
    .needs{
        margin:7px;
        padding: 10px;
        border-radius: 5px;
        overflow: hidden;
    }
    .needs .need{
        position: relative;
    }
</style>